<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 310px;
				height: 400px;
				margin: 0 auto;
				position: relative;
			}

			button {
				width: 100px;
				height: 100px;
				background-color: skyblue;
				margin: auto;
			}

			.div1 div {
				width: 100%;
				height: 250px;
				background-color: orange;
				position: absolute;
				top: 100px;
				left: 0px;
				text-align: center;
				display: none;
			}
			
			.activediv{
				display: block !important;
			}
			.activebtn{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<button type="button" class="activebtn">按钮1</button>
			<button type="button">按钮2</button>
			<button type="button">按钮3</button>
			<div class="activediv">
				<h1>页面1</h1>

			</div>
			<div >
				<h1>页面2</h1>

			</div>
			<div >
				<h1>页面3</h1>

			</div>
		</div>

	</body>
	<script type="text/javascript">
	var a = document.getElementsByTagName("button");
	console.log(a[0]);
		var arr = document.querySelectorAll(".div1 button");
		console.log( arr[0]);
		var newarr = document.querySelectorAll(".div1 div");
		arr.forEach(function(item,index){
			item.onclick = function(){
				newarr.forEach(function(i,j){
					i.className= "";
					arr[j].className = "";
				})
				item.className= "activebtn";
				newarr[index].className = "activediv"
			}
		})
	</script>
</html>
